<template>
  <div class="banner-box">
    <ul>
      <li v-for="data in pics" :style="{transform:'translate3d('+ ($index == 0 ? 0 : w) +'px, 0, 0)'}">
        <a :href="data.href">
          <img :src="data.img" />
        </a>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return {
        elementList:null,
        //当前滑块
        current:0,
        prev:0,
        next:1,
        startX:null,
        moveX:null,
        endX:null,
        Interval:null
      }
    },
    props:{
      sync:{
        type:Boolean,
        default:false
      },
      pics:{
        type:Array
      },
      autoPlay:{
        type:Boolean,
        default:true
      },
      animateDate:{
        type:Number,
        default:300
      },
      speed:{
        default:3000
      }
    },
    ready(){
      if(this.sync){
        //this.init();
      }else{
        this.$watch("pics" , function(){
          //this.init();
        });
      };
    },
    computed:{
      w(){
        return this.$el.offsetWidth;
      }
    },
    methods:{
      //初始化
      init(){
        var self = this;
        self.elementList = self.$el.getElementsByTagName('ul')[0].getElementsByTagName("li");
        self.addEn();
        self.autoPlay && self.Play(true);
      },
      //touchstart
      touchstart(e){
        this.Play(false);
        this.startX = e.touches[0].pageX;
      },
      //touchmove
      touchmove(e){
        var self = this;
        e.preventDefault();
        self.next = self.current == 4 ? 0 : self.current+1;
        self.prev = self.current == 0 ? this.elementList.length - 1 :  self.current-1;
        //计算移动差值
        self.moveX = e.touches[0].pageX - self.startX;
        self.setX(self.elementList[self.current] , 0 , self.moveX);
        self.setX(self.elementList[self.prev] , 0 , -self.w + self.moveX);
        self.setX(self.elementList[self.next] , 0 , self.w + self.moveX);
      },
      //touchend
      touchend(e){
        if(this.moveX > 0){
          this.right();
        }else{
          this.left();
        };
        this.Play(true);
      },
      //绑定事件
      addEn(){
        this.$el.addEventListener("touchstart" , this.touchstart);
        this.$el.addEventListener("touchmove" , this.touchmove);
        this.$el.addEventListener("touchend" , this.touchend);
      },
      setX(element , time , x){
        element.style.zIndex = 11;
        element.style.WebkitTransitionDuration = time+'ms';
        element.style.WebkitTransform  = 'translate3d('+ x +'px, 0, 0)';
      },
      //自动播放
      Play(state){
        var self = this;
        if(state){
          clearInterval(self.Interval);
          console.log("启动计时器");
          self.Interval = setInterval(function (){
            self.left();
          }, self.speed);
        }else{
          clearInterval(self.Interval);
          self.Interval = "";
          console.log("停止计时器");
        };
      },
      //运动
      right(){
        this.setX(this.elementList[this.current--] , this.animateDate , 0);
        this.setX(this.elementList[this.current] , this.animateDate , this.w);
      },
      left(){
        this.setX(this.elementList[this.current] , this.animateDate , -this.w);
        this.setX(this.elementList[this.next] , this.animateDate , 0);
        this.current = this.next;
        this.next = this.current + 1;
        if(this.next == 5){
          this.next = 0;
        };
        //初始位置
        this.setX(this.elementList[this.next] , this.animateDate , this.w);
        this.elementList[this.next].style.zIndex = -1;
      }
    }
  }
</script>
<style>
  .banner-box{
    height:3rem;
    margin:0 0.2rem;
    overflow:hidden;
    border-radius:2px;
    position:relative;
    z-index:0;
  }
  .banner-box li{
    position:absolute;
    width:100%;
    height:100%;
  }
  .banner-box li a,
  .banner-box li img{
    -webkit-touch-callout:none;
    touch-callout:none;
  }
</style>
